<template>
  <div class="goods-item">
      <img :src="goodsItem.show.img"/>
      <div class="jies">
          <!-- |titleSplice -->
          <div class="goods-title">{{goodsItem.title}}</div> 
          <span class="price">{{goodsItem.price}}</span>
          <span class="stars">{{goodsItem.cfav}}</span>
      </div>
  </div>
</template>

<script>
export default {
 props:{
     goodsItem:{
         type:Object,
         default(){
             return {}
         }
     }
 },

 filters:{
      titleSplice(value){
          if(value.length>13){
              value=value.substring(0,13)+'...'
          }
          return value
      }
 }
}
</script>

<style scoped>
      .goods-item{
          padding-bottom: 5px;
          width:48.5%;
          background: #ffffff;
          margin-top: 10px;
         
      }
       .jies{
        text-align: center;
        padding: 2px 0px;
        color:#333333;
        box-sizing: border-box;
        font-size: 12px;
      }
      .goods-title{
          width: 90%;
          height: 13px;
          text-overflow:ellipsis; 
          white-space: nowrap;
          overflow: hidden;
          font-size: 12px;
          padding-bottom:5px;
          margin: 0 auto;
      }
     
      .price{   
          color: var(--background-my);
          padding-right: 20px;
      }
      .stars{
          text-align:right;
      }
       .goods-item img{
            width: 100%;
            height:240px;
       }
</style>